<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="et">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
	<title>Laevade Uputamine</title>
	<link href="index_style.css" rel="stylesheet" type="text/css" >
	
	<script type="text/javascript" src="jquery-1.7.1.js"></script>
	<script type="text/javascript" src="muutujad.js" charset="utf-8"></script>
	<script type="text/javascript" src="func.js" charset="utf-8" ></script>
	<script type="text/javascript" src="kontroll.js" charset="utf-8"></script>
	<script type="text/javascript" src="replay.js" charset="utf-8"></script>
	<script type="text/javascript" src="highScore.js" charset="utf-8"></script>
	<script type="text/javascript" src="gameLogic.js" charset="utf-8"></script>
	
	<script type="text/javascript">
	
		var user = ${FBUserInfoJSON};
		
		console.log(user.first_name);
			
		$.get( "CheckUser", {account : user.first_name}, 
				function( data ) {
			var string = data.split(",");
			
			console.log(data);
			
			$("#player1").html(string[0]);
			$("#voit").html("Võite: "+string[1]);
			$("#kaotus").html("Kaotusi: "+string[2]);
		});		
		
	</script>

</head>

<body>

<div id="menubar">
	<p class="menubar" id="logout" onclick="logout()">Logi välja</p>
</div>

<br />

<div id="pealkiri">	
	<p class="pealkiri">Laevade Uputamine</p>
</div>
<div id="tervePlats">
<table id="layOut">
	<tr>
		 <td>
		    <div id="stats">
		    	<table  class="stats">
		    		<tr>
		    			<th class="stats" id="voit">Võite: </th>
		    			<td class="stats"></td>
		    			<th class="stats" id="kaotus">Kaotusi: </th>
		    			<td class="stats"></td>			
		    		</tr>
		    	</table>
		    </div> 
	  	</td>
  	</tr>
	<tr>
		<td>
		    <div id="plats1">
		        <table class="plats" id="tabel1">
		        	<tr>
		        		<td class="kasutaja" id="player1" colspan="11">Mängija</td>
		        	</tr>
						<script type="text/javascript">
							var alpha = [ 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J'];
							var num = [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 110];
							document.writeln('<tr>');
							document.writeln('<th class="plats"></th>');
		
							for ( var int = 0; int < alpha.length; int++) {
								document.writeln('<th class="plats">' + alpha[int]
										+ '</th>');
							}
							document.writeln('</tr>');
		
							for ( var int3 = 1; int3 < 11; int3++) {
								document.writeln('<tr>');
								document.writeln('<th class="plats">' + int3 + '</th>');
								for ( var int2 = 0; int2 < 10; int2++) {
									document.writeln('<td id="'+(int2+num[int3-1])+'" class="plats" onclick = "createShip(this.id)"></td>');
								}
								document.writeln('</tr>');
							}
						</script>
				</table>
		    </div>
		 </td>
		 
		 <td>
		    <div id="plats2">
		        <table class="plats" id="vastaseTabel">
		        	<tr>
		        		<td class="kasutaja" id="player2" colspan="11">Vastane</td>
		        	</tr>                 
		            <script type="text/javascript">
		            	var alpha = ['A','B','C','D','E','F','G','H','I','J']
		            	document.writeln('<tr>');
		            	document.writeln('<th class="plats"></th>');
		            	
		            	for ( var int = 0; int < alpha.length; int++) {
		            		document.writeln('<th class="plats">'+ alpha[int] +'</th>');
						}
		            	document.writeln('</tr>');
		            	
		            	for ( var int3 = 1; int3 < 11; int3++) {
		            		document.writeln('<tr>');
		            		document.writeln('<th class="plats">'+ int3 +'</th>');            		
		            		for ( var int2 = 0; int2 < 10; int2++) {
		            			document.writeln('<td class="plats" id="'+(int2+num[int3-1]+100)+'" onclick = "onClickCheck(this.id, shipsEnemy)"></td>');
		    				}    				
		            		document.writeln('</tr>');
						}        		       		
		        	</script>
		        </table>        
		    </div>
		 </td>			 
	</tr>
    <tr id="nupurida" style="display:none">
    	<td colspan = "2">
		    <div id="nupud">
		    	<table  class="nupud">
		    		<tr>
					    <td><button type="button" onclick="chooseShipOrientation()" class = "orientatsiooniNupp" id = "Oriantatsioon">Horisontaalsed laevud</button></td>
					    <td><button type="button" onclick="chooseShipType(1)" class = "laevaNupp" id = "yheRuuduLaev">1 ruut</button></td>
					    <td><button type="button" onclick="chooseShipType(2)" class = "laevaNupp" id = "kaheRuuduLaev">2 ruutu</button></td>
					    <td><button type="button" onclick="chooseShipType(3)" class = "laevaNupp" id = "kolmeRuuduLaev">3 ruutu</button></td>
					    <td><button type="button" onclick="chooseShipType(4)" class = "laevaNupp" id = "neljaRuuduLaev">4 ruutu</button></td>
					    <td><button type="button" onclick="begin()" class = "alustaManguNupp" id = "alustaManguNupp">Alusta mängu</button></td>
				    </tr>
		    	</table>
		    </div>
		</td>
	    </tr>
	    <tr id = "nupuridaUusMang" class="nupud">
	    	<td colspan = "2">
	    		<div id="new">
		    		<table  class="nupud">
		    			<tr>
	    					<td class="nupud"><button class="alustaManguNupp" type="button" onclick="newGame()" id="uusMang">Uus Mäng</button></td>
	    					<td class="nupud"><button class="alustaManguNupp" type="button" onclick="getHighScore()" id="edetabeliNupp">Edetabel</button></td>
	    					<td class="nupud"><button class="alustaManguNupp" type="button" onclick="getReplay()" id="replayNupp">Replay</button></td>
	    				</tr>
		    		</table>
		    	</div>
		    </td>
	    </tr>
	    <tr id = "manguSeis" style="display:none">
	    	<td colspan = "2">
			    <div id="seis">
				    <table class="stats2">
				    	<tr>
			        		<th class="stats2" colspan="3">Mängu seis</th>
			        	</tr> 
				    	<tr>
				    		<td>
							    <div id="stats1">
							    	<table  class="stats2">
							    		<tr>
							    			<th class ="stats2">Uputatud laevu</th>
							    		</tr>
							    		<tr>
							    			<td class="stats2"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2"></td>
							    		</tr>
							    	</table>
							    </div> 
						    </td>
						    
						    <td>
							    <div id="stats2">
							    	<table  class="stats2">
							    		<tr>
							    			<th class ="stats2" colspan="4">Laeva tüüp</th>
							    		</tr>
							    		<tr>
							    			<td class="stats2Laev"></td>
							    			<td class="stats2Laev"></td>
							    			<td class="stats2Laev"></td>
							    			<td class="stats2Laev"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2Laev"></td>
							    			<td class="stats2Laev"></td>
							    			<td class="stats2Laev"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2Laev"></td>
							    			<td class="stats2Laev"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2Laev"></td>
							    		</tr>
							    	</table>
							    </div> 
						    </td>
						    
						    <td>
							    <div>
							    	<table  class="stats2">
							    		<tr>
							    			<th class ="stats2">Kaotatud laevu </th>
							    		</tr>
							    		<tr>
							    			<td class="stats2" id = "fourSquareShipsLost"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2" id = "threeSquareShipsLost"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2" id = "twoSquareShipsLost"></td>
							    		</tr>
							    		<tr>
							    			<td class="stats2" id = "oneSquareShipsLost"></td>
							    		</tr>
							    	</table>
							    </div>
						    </td> 
						    
					    </tr>
				    </table>
			    </div>
			</td>
    	</tr>
    	<tr id = "edeTabel" style="display:none">
    		<td colspan = '2'>
				<table id = "edeTabeliTabel"  class="ede">
					<tr >
						<th id = 'edePealkiri' colspan = '2'>Edetabel</th>
					</tr>
					<tr >
						<th>Mängija nimi</th>
						<th>Võitude arv</th>
					</tr>
				</table>
			</td>
		</tr>
		<tr id = "replay" style="display:none">
    		<td colspan = '1'>
				<table id = "replayTabel"  class="ede">
					<tr >
						<th colspan = '2'>Replay mängud</th>
					</tr>					
				</table>
			</td>	
		</tr>
    </table>
</div>
</body>
</html>
